.component-container {
	// 遮罩层动画
	//显示
	.wrapAnimate {
		animation: wrapAnimate 0.5s ease-in-out forwards;
	}
	
	@keyframes wrapAnimate {
		0% {
			background: rgba(0, 0, 0, 0);
		}
		100% {
			background: rgba(0, 0, 0, 0.35);
		}
	}
	//隐藏
	.wrapAnimateOut {
		animation: wrapAnimateOut 0.4s ease-in-out forwards;
	}
	
	@keyframes wrapAnimateOut {
		0% {
			background: rgba(0, 0, 0, 0.35);
		}
		100% {
			background: rgba(0, 0, 0, 0);
		}
	}
	
	//内容动画
	//显示
	.frameAnimate {
		animation: frameAnimate 0.5s ease forwards;
	}
	
	@keyframes frameAnimate {
		0% {
			// 向下移出屏幕
			transform: translateY(100%);
		}
		100% {
			transform: translateY(0);
		}
	}
	//隐藏
	.frameAnimateOut {
		animation: frameAnimateOut 0.4s ease forwards;
	}
	
	@keyframes frameAnimateOut {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(100%);
		}
	}
	
	.wrap {
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	
	.frame-wrapper {
		position: fixed;
		width: 100vw;
		z-index: 200;
		left: 0;
		bottom: 0;
		height: max-content;
		
		.frame-content {
			background: white;
			max-height: 70vh;
			border-radius: 30rpx 30rpx 0 0;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			
			.header {
				display: flex;
				justify-content: space-between;
				
				.title {
					font-size: 36rpx;
					color: #333333;
				}
			}
			
			.content {
				height: 0;
				flex: 1;
				margin-top: 30rpx;
				overflow: scroll;
				line-height: 55rpx;
			}
		}
	}
}